<!-- 交易管理 => 订单管理 -->
<template>
  <div class="box" id="main">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
    <e-charts class="chart" :option="option" />
    <el-calendar v-model="value" class=""> </el-calendar>
  </div>
</template>

<script>
export default {
  name: "APP",
  data() {
    return {};
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  computed: {
    option() {
      return {
        xAxis: {
          type: "category",
          data: ["Matcha Latte", "Milk Tea", "Cheese Cocoa", "Walnut Brownie"],
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            name: "2015",
            data: [89.3, 92.1, 94.4, 85.4],
          },
          {
            type: "bar",
            name: "2016",
            data: [95.8, 89.4, 91.2, 76.9],
          },
          {
            type: "bar",
            name: "2017",
            data: [97.7, 83.1, 92.5, 78.1],
          },
        ],
      };
    },
  },
};
</script>
<style scoped lang="scss">
.chart {
  height: 400px;
}
</style>
